<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相册</title>
    <style>
        section{
            margin:0 auto;
            text-align: center;
        }
        .full-image{
            position:relative;
        }
        button{
           position: absolute;
           z-index: 10;
        }
        .layer{
            width:640px;
            height:480px;
            position:absolute;
            top:0;
            margin-left: 50%;
            transform: translateX(-50%);
        }
        .dark{
            background-color:rgba(0,0,0, .2);
        }

        .thumb-image ul{
            width:640px;
            margin:0 auto;
            padding:0;
            overflow: hidden;
            clear: both;
            list-style: none;
        }
        .thumb-image ul li{
           float: left;
           width:20%;
        }
        .thumb-image ul li img{
            width:100%;
        }
       
    </style>
</head>

<body>
    <section>
        <h2>Image gallery example</h2>
        <div class="full-image">
            <button class="btn" type="button">Darken</button>
            <img class="view-image" src="img/pic2.jpg">
            <div class="layer"></div>
        </div>

        <div class="thumb-image">
            <ul>
                <li>
                    <img src="img/pic1.jpg">
                </li>
                <li>
                    <img src="img/pic2.jpg">
                </li>
                <li>
                    <img src="img/pic3.jpg">
                </li>
                <li>
                    <img src="img/pic4.jpg">
                </li>
                <li>
                    <img src="img/pic5.jpg">
                </li>
            </ul>
        </div>
    </section>

    <button id="btn">Click here!</button>
    <script>
        var img = document.querySelector('.view-image');
        var thumbImg = document.querySelector("ul");
        var btn = document.querySelector(".btn");
        var layer = document.querySelector(".layer");
        thumbImg.addEventListener('click', function(e){
            img.setAttribute("src", e.target.getAttribute("src"))
        }, true);

        btn.addEventListener("click", function(e){
            console.log(e.target.innerText);
            if(e.target.innerText === "Darken"){
                e.target.innerText ="Lighten";
                layer.classList.add("dark")
            }else{
                e.target.innerText = "Darken";
                layer.classList.remove("dark")
            }
        })

        var buttonElement = document.getElementById('btn');

        buttonElement.addEventListener('click', function(){

        })
    </script>
</body>

</html>
